<%--
  Created by IntelliJ IDEA.
  User: Teacher
  Date: 2025/4/1
  Time: 10:02
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>第一个Ajax程序</title>
    <script>
        function sayHello(){
            // 1.获取Ajax引擎对象
            let xhr = new XMLHttpRequest();

            // 2.准备回调函数
            // 回调函数:当后台返回响应之后调用的处理函数
            // xhr.onreadystatechange = callback;
            xhr.onreadystatechange = function(){
                // console.log("ajax状态:"+xhr.readyState);
                // console.log("Http状态:"+xhr.status);
                // 当Ajax状态值为4,且Http状态值为200时表示成功返回响应
                // 此时给予响应结果做对应的处理
                if(xhr.readyState == 4 && xhr.status == 200){
                    // 获取响应数据
                    let result = xhr.responseText;
                    document.getElementById("s1").innerHTML = result;
                }
            }

            // 3.建立与服务器的连接
            xhr.open("get","${pageContext.request.contextPath}/sayHello");

            // 4.发送请求
            // 方法参数表示请求参数
            // 如果是get请求,由于请求参数可以在url地址中体现,因此此处直接传递null即可
            xhr.send(null);
        }

        function callback(){
        }
    </script>
</head>
<body>
<button onclick="sayHello()">sayHello</button>
<span id="s1"></span>
</body>
</html>
